<template>
	<view class="container flex-column center-row">
		<text class="text-title" style="font-size: 48rpx">欢迎来到{{ name }}</text>
		<text class="text-title2">确认省份信息，获取更精准的服务</text>
		<text class="text-title" style="margin-bottom: 20rpx">选择高考省份</text>

		<view class="flex-row flex-wrap" style="padding: 0 22rpx">
			<view
				class="view-province-item"
				v-for="(item, index) in provinces"
				:class="selectIndex == index ? 'select' : ''"
				@tap="onClickProvinceItem(item, index)"
			>
				{{ item.provinceName }}
			</view>
		</view>

		<button class="button-ok" :class="isAvailable ? 'available' : ''" @tap="onClickOkBtn">确定</button>
		<!-- <loading v-show="loadshow"></loading> -->
	</view>
</template>

<script>
import userManager from '@/common/manager/user-manager.js';
import xcxInfo from '@/common/manager/xcxInfo.js';
export default {
	data() {
		return {
			loadshow: false,
			provinces: [],
			selectIndex: -1,
			selectProvince: undefined,
			isAvailable: false,
			name: xcxInfo.name
		};
	},
	onLoad() {
		const provinceInfo = userManager.getProvinceList();

		if (provinceInfo.length > 0) {
			this.provinces = provinceInfo;
			this.formatProvinces();
		} else {
			this.getProvinceInfo();
		}
	},
	methods: {
		getProvinceInfo() {
			this.loadshow = true;
			this.$request.provinceInfo().then((res) => {
				this.loadshow = false;
				if (res.data.length > 0) {
					userManager.setProvinceList(res.data);

					this.provinces = res.data;
					this.formatProvinces();
				}
			});
		},
		onClickProvinceItem(province, index) {
			this.selectIndex = index;
			this.selectProvince = province;
			this.isAvailable = true;
		},
		onClickOkBtn() {
			if (this.isAvailable) {
				uni.setStorageSync('isFirstLogin', true);
				this.$userManager.setProvinceInfo(this.selectProvince);

				uni.switchTab({
					url: '/pages/tabBar/home/home'
				});
			}
		},
		formatProvinces() {
			// ID 81=香港 移除香港
			let index = this.provinces.findIndex((item) => item.id == '81');
			if (index > -1) {
				this.provinces.splice(index, 1);
			}
			// ID 82=澳门 移除澳门
			index = this.provinces.findIndex((item) => item.id == '82');
			if (index > -1) {
				this.provinces.splice(index, 1);
			}
		}
	}
};
</script>

<style>
button::after {
	border: none;
}

.container {
	background-color: #f8f8f8;
	min-height: calc(100vh - var(--window-top));
}

.text-title {
	color: #464646;
	font-size: 40rpx;
	font-weight: bold;
}

.text-title2 {
	color: #464646;
	font-size: 28rpx;
	padding-bottom: 20rpx;
}

.view-province-item {
	width: 158rpx;
	height: 70rpx;
	background-color: #fff;
	line-height: 78rpx;
	color: #464646;
	font-size: 28rpx;
	text-align: center;
	margin: 16rpx 9rpx;
	border-radius: 20rpx;
}

.view-province-item.select {
	color: #fff;
	background: #ff3b0a;
}

.button-ok {
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
	width: 600rpx;
	height: 80rpx;
	line-height: 82rpx;
	background-color: #d8d8d8;
	border-radius: 20rpx;
	margin-top: 72rpx;
	margin-bottom: 60rpx;
}

.button-ok.available {
	background-color: transparent;
	background: #ff3b0a;
}
</style>
